<!-- @Author: Yu_Bo -->
<template>
	<view class="scancode">
		<u-popup v-model="show" mode="center" :mask-close-able="false">
			<view class="main">
				<view class="main_title">
					扫码入库
				</view>
				<view v-if="info">
					<view class="main_img">
						<image :src="info.image" mode="aspectFill"></image>
					</view>
					<view class="main_name">
						{{info.goods_name}}
					</view>
					<view class="main_tip">
						{{info.author}}/{{info.press}}
					</view>
					<view class="main_txt">
						库存: {{info.book_num}}<text v-if="info.supply || info.supply == 0">可调拨量：{{info.supply}}</text>
					</view>
					<view class="main_switch" style="padding-top: 30rpx;">
						<text>是否二手书</text>
						<u-switch v-model="checked" active-color="#5A68FF" inactive-color="#DCDCDC" size="30"></u-switch>
					</view>
					<view class="main_btn">
						<view class="btn_txt color_right page_button" @click="scanShelves">扫描货架码</view>
					</view>
				</view>
				<view v-else>
					<view class="main_icon">
						<image src="../../static/images/img/scan_icon.png" mode=""></image>
					</view>
					<view class="main_switch">
						<text>是否二手书</text>
						<u-switch v-model="checked" active-color="#5A68FF" inactive-color="#DCDCDC" size="30"></u-switch>
					</view>
					<view class="main_btn">
						<view class="btn_txt color_right page_button" @click="scanBook">扫描书籍码</view>
					</view>
				</view>
			</view>
			<view class="close">
				<image @click="closeBtn" src="@/static/images/img/close.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return{
				show: false,
				info: null,
				checked: false,
			}
		},
		computed: {},
		mounted() {},
		methods: {
			// 打开
			openBtn() {
				this.show = true
			},
			// 关闭
			closeBtn() {
				this.info = null
				this.show = false
			},
			// 扫描书籍码
			scanBook() {
				var that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log(res)
						console.log('条码类型：' + res.scanType)
						console.log('条码内容：' + res.result)
						if(res.result) {
							that.getInfo(res.result)
						} else {
							that.$tips.showToast("未识别到条码内容")
						}
					}
				});
			},
			getInfo(val) {
				var that = this
				var params = {
					isbn: val,
					condition: that.checked ? 1 : 0
				}
				that.$httpApi.goodInfo(params).then((res) => {
					if (res.code == 1) {
						console.log(res)
						that.info = res.data
					}
				})
			},
			// 扫描货架码
			scanShelves() {
				var that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log(res)
						console.log('条码类型：' + res.scanType)
						console.log('条码内容：' + res.result)
						if(res.result) {
							var obj = {
								condition: that.checked ? 1 : 0,
								goods_id: that.info.goods_id,
								shelf_number: res.result
							}
							that.$emit('confirm', obj, that.info)
							that.closeBtn()
						} else {
							that.$tips.showToast("未识别到条码内容")
						}
					}
				});
			},
		},
	}
</script>

<style lang='scss' scoped>
	.scancode {
		.main {
			width: 600rpx;
			padding: 50rpx;
			border-radius: 40rpx;
			background: linear-gradient(to bottom, #6FECFF, #F5FEFF, #FFFFFF);
			
			.main_title {
				width: 100%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #222222;
			}
			
			.main_img {
				width: 100%;
				padding-top: 50rpx;
				
				 image {
					 display: block;
					 width: 180rpx;
					 height: 240rpx;
					 margin: auto;
				 }
			}
			
			.main_icon {
				width: 100%;
				
				 image {
					 display: block;
					 width: 400rpx;
					 height: 400rpx;
					 margin: auto;
				 }
			}
			
			.main_name {
				width: 100%;
				padding-top: 40rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
			}
			
			.main_tip {
				width: 100%;
				padding-top: 20rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
			
			.main_txt {
				width: 100%;
				padding-top: 20rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #5A68FF;
				
				text {
					padding-left: 40rpx;
				}
			}
			
			.main_switch {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				text {
					padding-right: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}
			
			.main_btn {
				width: 100%;
				padding-top: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.btn_txt {
					width: 400rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					border-radius: 40rpx;
				}
			}
		}
		
		.close {
			width: 100%;
			padding-top: 120rpx;
			
			image {
				display: block;
				width: 80rpx;
				height: 80rpx;
				margin: auto;
			}
		}
	}
</style>